<template>
  <div class="alarm-detail" v-loading="loading">
    <div class="alarm-detail-top">
      <b-tabs v-model="activeTab" :items="tabs" class="alarm-detail-tabs"></b-tabs>
    </div>
    <div class="alarm-detail-content" v-if="alarmData.main_info">
      <alarm-info :params="alarmData.main_info" v-if="activeTab === '1'" />
      <history-curve :params="alarmData.main_info" v-if="activeTab === '2'" />
      <address-book :params="addressBookList" v-if="activeTab === '3'" />
      <alarm-timeline :params="alarmData.steps" v-if="activeTab === '4'" />
      <enterprise-disposal :params="alarmData.main_info" v-if="activeTab === '5'" />
    </div>
  </div>
</template>

<script setup lang="ts">
import BTabs from '@/components/b-tabs.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import alarmInfo from './alarmInfo.vue'
import historyCurve from './historyCurve.vue'
import addressBook from './addressBook.vue'
import alarmTimeline from './alarmTimeline.vue'
import enterpriseDisposal from './enterpriseDisposal.vue'
import { getAlarmHistory, getAddressBookList } from '@/api/alarm'

const props = defineProps<{
  params: Object
}>()

const activeTab = ref('1')
const tabs = ref([
  {
    label: '报警信息',
    id: '1'
  },
  {
    label: '报警曲线',
    id: '2'
  },
  {
    label: '通讯录',
    id: '3'
  },
  {
    label: '报警时间轴',
    id: '4'
  },
  {
    label: '企业处置',
    id: '5'
  }
])

const alarmData = ref({})
const addressBookList = ref([])
const loading = ref(false)
let interval = null
onMounted(async () => {
  loading.value = true
  await getAlarmData()
  loading.value = false
  // 每分钟更新一次
  interval = setInterval(() => {
    getAlarmData()
  }, 60000)
})

onUnmounted(() => {
  clearInterval(interval)
})

async function getAlarmData() {
  const [alarmRes, addressBookRes] = await Promise.all([
    getAlarmHistory(props.params.id),
    getAddressBookList()
  ])
  alarmData.value = alarmRes.data
  addressBookList.value = addressBookRes.data
}

</script>

<style scoped lang="scss">
.alarm-detail {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--scale));
  .alarm-detail-content {
    flex: 1;
    overflow: auto;
  }
}
</style>
